import { Component } from "react";
import style from "./style.module.scss";
import { time } from "console";
interface Props {}
interface State {}
class Index extends Component<Props, State> {
  readonly interval: number = 10;
  state = {
    formData: {
      mobile: "",
      code: "",
    },
    time: this.interval,
    timer: -1,
  };

  getCode = () => {
    if (this.state.timer >= 0) return;

    this.setState({
      time: --this.state.time,
    });
    //设置定时器
    let timer = setInterval(() => {
      if (this.state.time <= 1) {
        clearInterval(this.state.timer);
        this.setState({
          timer: -1,
          time: this.interval,
        });
        return;
      }

      this.setState({
        time: --this.state.time,
      });
    }, 1000);

    this.setState({
      timer,
    });
  };

  onChange = (e: any) => {
    this.setState({
      formData: {
        ...this.state.formData,
        [e.target.name]: e.target.value,
      },
    });
  };
  render() {
    const { mobile, code } = this.state.formData;
    return (
      <div className={style.login}>
        <img src={require("../../assets/logo1.jpg")} alt="" />
        <div className={style.phone}>
          <input
            type="text"
            placeholder="手机号"
            value={mobile}
            onChange={this.onChange}
            name="mobile"
          />
          <div onClick={this.getCode}>
            {this.state.timer >= 0 ? `剩余${this.state.time}s` : "获取验证码"}
          </div>
        </div>
        <div className={style.code}>
          <input
            type="text"
            placeholder="验证码"
            value={code}
            onChange={this.onChange}
            name="code"
          />
        </div>
        <button className={style.loginBtn}>登录</button>
        <p>收不到验证码</p>
      </div>
    );
  }
}
export default Index;
